<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>个人中心</title>
    <!--import regCss-->
    <link rel="stylesheet" href="css/personalCenter.css">
</head>
<body>
<div id="app">
    <el-container>
        <!--top栏-->
        <el-header height="40px">
            <div style="width: 1200px;margin: 0 auto">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <a href="/reg.html">登录</a>
                            <el-divider direction="vertical"></el-divider>
                            <a href="/login.html">注册</a>
                            <el-divider direction="vertical"></el-divider>
                        </div>
                    </el-col>
                    <el-col :span="9"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="11"><div class="grid-content bg-purple">
                        <span><a href="">我的订单</a></span>
                        <el-divider direction="vertical"></el-divider>
                        <a href=""><span>我的臻城</span></a>
                        <el-divider direction="vertical"></el-divider>
                        <a href=""><span>臻城会员</span></a>
                        <el-divider direction="vertical"></el-divider>
                        <a href=""><span>企业采购</span></a></a>
                        <el-divider direction="vertical"></el-divider>
                        <a href=""><span>客户服务</span></a>
                        <el-divider direction="vertical"></el-divider>
                        <a href=""><span>网页导航</span></a>
                    </div></el-col>
                </el-row>
            </div>
        </el-header>
        <el-header height="150px">
            <div style="width: 1200px;margin: 0 auto">
                <img src="img/sompic/logo1.png" style="width: 200px;height: 100px;vertical-align: middle" alt="">
                <div style="float: right;position: relative;top: 10px;margin-right: 200px">
                    <div style="overflow: hidden;display: inline">
                        <el-input placeholder="请输入搜索内容" v-model="wd">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>
                    <div style="position: absolute;display: inline;float:right;margin-left: 80px;width: 100px"><el-button>购物车</el-button></div>
                    <div>
                        <a href="/">首页</a><el-divider direction="vertical"></el-divider>
                        <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                        <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                        <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                        <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                        <a href="">帮助</a>
                    </div>
                </div>
            </div>
            <!--导航菜单开始-->
            <div style="background-color: #0AE2B2;width: 1200px;margin: 0 auto" >
                <el-menu style="width: 1200px"
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="green"
                    text-color="#fff"
                    active-text-color="#fff">
                    <el-row>
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-menu-item style="text-align: center">品优超市</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-menu-item>美妆</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple-light">
                            <el-menu-item>洗护</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-menu-item>家电</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-menu-item>团购</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple-light">
                            <el-menu-item>有趣</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple">
                            <el-menu-item>秒杀</el-menu-item>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple-light">
                            <el-menu-item style="text-align: center">优惠</el-menu-item>
                        </div></el-col>
                    </el-row>
            </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <div class="main">
                <!-- 将网页中间的main内容分为左右两块 -->
                <div class="left">
                    <div class="user">
                        <img src="./img/y-s-z-c/hp1.png" alt="">
                        <span>小明</span>
                    </div>
                    <div class="account">
                        <div class="account_title">
                            我的账户
                        </div>
                        <ul>
                            <li>个人中心</li>
                            <li>消息通知</li>
                            <li>安全设置</li>
                            <li>地址管理</li>
                            <li>我的积分</li>
                            <li>我的足迹</li>
                        </ul>
                    </div>
                    <div class="account">
                        <div class="account_title">
                            交易管理
                        </div>
                        <ul>
                            <li>我的订单</li>
                            <li>优惠券</li>
                            <li>评价晒单</li>
                            <li>售后服务</li>
                        </ul>
                    </div>
                    <div class="account">
                        <div class="account_title">
                            我的收藏
                        </div>
                        <ul>
                            <li>收藏的商品</li>
                            <li>收藏的店家</li>
                        </ul>
                    </div>
                    <div class="account">
                        <div class="account_title">
                            帮助中心
                        </div>
                        <ul>
                            <li>帮助中心</li>
                            <li>在线客服</li>
                        </ul>
                    </div>
                </div>
                <!-- 网页main内容的右边部分 -->
                <div class="right">
                    <div class="right_top">
                        <div class="vip">
                            <div class="vip_content">
                                <img src="./images/safe.png" alt="">
                                <p>会员中心</p>
                            </div>
                            <div class="vip_content">
                                <img src="./images/vip.png" alt="">
                                <p>安全设置</p>
                            </div>
                            <div class="vip_content">
                                <img src="./images/address.png" alt="">
                                <p>地址管理</p>
                            </div>
                        </div>
                        <div class="vip vip_line">
                            <div class="vip_content vip_coupons">
                                <span>6</span>
                                <p>优惠券</p>
                            </div>
                            <div class="vip_content vip_coupons">
                                <span>2</span>
                                <p>礼品卡</p>
                            </div>
                            <div class="vip_content vip_coupons">
                                <span>256</span>
                                <p>积分</p>
                            </div>
                        </div>
                    </div>
                    <!-- 网页右边部分的中间内容 -->
                    <div class="right_middle">
                        <div class="right_middle_top">
                            <span>我的订单</span>
                            <a href="#">查看全部 ></a>
                        </div>
                        <div class="right_middle_content">
                            <div class="my_order_left">
                                <img src="./uploads/clothes_goods_5.jpg" alt="">
                                <div class="my_order_left_text">
                                    <p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p>
                                    <span>颜色：白色 尺码：M 数量：1</span>
                                </div>
                            </div>
                            <div class="my_order_center_one">
                                <span>待付款</span>
                                <span>查看物流</span>
                            </div>
                            <div class="my_order_center_two">
                                <span>￥99.00</span>
                                <span>(含运费：￥10.00元)</span>
                                <span>在线支付</span>
                            </div>
                            <div class="my_order_right">
                                <button>立即付款</button>
                                <span>查看详情</span>
                                <span>取消订单</span>
                            </div>
                        </div>
                        <div class="right_middle_content">
                            <div class="my_order_left">
                                <img src="./uploads/clothes_goods_6.jpg" alt="">
                                <div class="my_order_left_text">
                                    <p>李宁跑步鞋男鞋空气弧度圆男正品圆男正品圆领短袖拉</p>
                                    <span>颜色：白色 尺码：M 数量：1</span>
                                </div>
                            </div>
                            <div class="my_order_center_one">
                                <span>待付款</span>
                                <span>查看物流</span>
                            </div>
                            <div class="my_order_center_two">
                                <span>￥99.00</span>
                                <span>(含运费：￥10.00元)</span>
                                <span>在线支付</span>
                            </div>
                            <div class="my_order_right">
                                <button>立即付款</button>
                                <span>查看详情</span>
                                <span>取消订单</span>
                            </div>
                        </div>
                        <div class="right_middle_content">
                            <div class="my_order_left">
                                <img src="./uploads/clothes_goods_7.jpg" alt="">
                                <div class="my_order_left_text">
                                    <p>拉夫劳伦t恤男正品圆男正品圆男正品圆男正品圆领短袖拉</p>
                                    <span>颜色：白色 尺码：M 数量：1</span>
                                </div>
                            </div>
                            <div class="my_order_center_one">
                                <span>待付款</span>
                                <span>查看物流</span>
                            </div>
                            <div class="my_order_center_two">
                                <span>￥99.00</span>
                                <span>(含运费：￥10.00元)</span>
                                <span>在线支付</span>
                            </div>
                            <div class="my_order_right">
                                <button>立即付款</button>
                                <span>查看详情</span>
                                <span>取消订单</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_middle">
                        <div class="right_middle_top">
                            <span>收藏的商品</span>
                            <a href="#">查看全部 ></a>
                        </div>
                        <div class="collection_all">
                            <div class="collection">
                                <img src="./uploads/clothes_goods_1.jpg" alt="">
                                <div class="collection_title">
                                    <p>人本秋季厚底帆布鞋韩版低帮增高学生</p>
                                    <p> ￥<span>55</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_2.jpg" alt="">
                                <div class="collection_title">
                                    <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                                    <p> ￥<span>20.9</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_3.jpg" alt="">
                                <div class="collection_title">
                                    <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                                    <p> ￥<span>209</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_4.jpg" alt="">
                                <div class="collection_title">
                                    <p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p>
                                    <p> ￥<span>274.5</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right_middle">
                        <div class="right_middle_top">
                            <span>我的足迹</span>
                            <a href="#">查看全部 ></a>
                        </div>
                        <div class="collection_all">
                            <div class="collection">
                                <img src="./uploads/clothes_goods_5.jpg" alt="">
                                <div class="collection_title">
                                    <p>拉夫劳伦t恤男正品圆男正品男正品</p>
                                    <p> ￥<span>99</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_6.jpg" alt="">
                                <div class="collection_title">
                                    <p>李宁跑步鞋男鞋空气弧度帆布鞋韩版低帮增高学生</p>
                                    <p> ￥<span>171.9</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_3.jpg" alt="">
                                <div class="collection_title">
                                    <p>迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
                                    <p> ￥<span>209</span></p>
                                </div>
                            </div>
                            <div class="collection">
                                <img src="./uploads/clothes_goods_4.jpg" alt="">
                                <div class="collection_title">
                                    <p>ONLY夏季新款高腰宽松七分阔腿裤休闲裤</p>
                                    <p> ￥<span>274.5</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div style="background-color: rgba(150, 140, 140, 0.3);
                    padding:30px 0;text-align: center;
                    color: rgba(255,255,255,0.8);width: 1200px;margin: 0 auto">
                <p>Copyright © 云尚臻城有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
                </p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                activeIndex:"1",
                wd:"",
                src:"imgs/aaa20221018184946.png"
            }
        },
       methods: {
           handleSelect(key,keyPath){
               console.log(key,keyPath);
           }
       }
   })
</script>
</html>
